<template>
  <div id="app">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div class="box">
      <h1>酵面鸡蛋卷饼</h1>
      <div class="textFot">
        <div class="flex" v-for="(item, index) in arrs" :key="index">
          <div class="name">{{ item.name }}</div>
          <img :src="item.img" alt="">
          <div class="price">
            {{ item.price }}
          </div>
          <div class="corBottom">
            元
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue"

export default {
  name: "App",
  data: function () {
    return {
      arrs: [
        {
          name: '白面卷饼',
          price: '5',
          img: require('./assets/白面卷饼.png')
        },
        {
          name: '菠菜卷饼',
          price: '5',
          img: require('./assets/菠菜卷饼.png')
        },
        {
          name: '火腿肠',
          price: '1.5',
          img: require('./assets/火腿肠.png')
        },
        {
          name: '茶叶蛋',
          price: '1.5',
          img: require('./assets/茶叶蛋.png')
        },
        {
          name: '烤肠',
          price: '1',
          img: require('./assets/烤肠.png')
        },
        {
          name: '鸡柳',
          price: '1',
          img: require('./assets/鸡柳.png')
        },
        {
          name: '辣条',
          price: '1',
          img: require('./assets/辣条.png')
        },
      ]
    };
  },
  components: {
    // HelloWorld
  }
}
</script>

<style>
h1 {
  color: #000;
  font-weight: 900;
  -webkit-text-stroke: 4px black;
  /* WebKit浏览器 */
  text-stroke: 2px black;
  /* 其他浏览器 */
  padding: 0;
  margin: 0 !important;
  font-size: 150px;
  text-align: center;
}

/* @media print {
  body {
    background: url('./assets/bg.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    /* 背景图像不重复 
}*/



.box {
  width: 1123px;
  height: 794px;
  background: url('./assets/bg.jpg') no-repeat;
  background-size: cover;
  /* background-color: skyblue; */
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.textFot {
  font-weight: 700;
  font-size: 50px;
  display: flex;
  /* 每个元素占据父元素的三分之一 */
  box-sizing: border-box;
  /* 包含边框和内边距的元素尺寸不会超出父元素的尺寸 */

}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 在每行元素之间均匀分布 */
}

.flex {
  color: #000;
  width: 100px;
  flex: 1;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  text-align: center;
  /* 在交叉轴上居中 */
}

.flex:nth-last-child(-n+2) .price {
  color: #fff;
}

.flex:nth-last-child(-n+2) .corBottom {
  color: #fff;
}

.flex .name {
  min-height: 200px;
}

.flex img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.price {
  writing-mode: horizontal-tb
}

.flex>* {
  margin-bottom: 10px;
  /* 子元素之间添加一些间距 */
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


}
</style>
